<!-- <script setup lang="ts">
import { h, onMounted, render } from 'vue'
// h函数(createVnode)+render函数 动态创建虚拟DOM渲染到页面
const vnode = h('h2', { title: '我是一个标题' }, '我是使用h函数创建的标题')
onMounted(() => {
  render(vnode, document.querySelector('.box')!)
})
</script> -->

<!-- h函数配合render函数   render函数的返回值可以定制组件的结构 -->
<!-- <script lang="ts">
import { h } from 'vue'
export default {
  // render是内置的 和 data methods
  render() { // 使用这种方式创建的组件结构和 template标签互斥, 如果都有最终以template为准
    // return的结果就会当做这个组件的结构
    return h('h2', { title: '我是一个标题' }, '我是使用h函数创建的标题')
  },
}
</script> -->
<script lang="ts">
import { h } from 'vue'
export default {
  // render是内置的 和 data methods
  render() { // 使用这种方式创建的组件结构和 template标签互斥, 如果都有最终以template为准
    // return的结果就会当做这个组件的结构
    /* const li1 = h('li', {}, '1111')
    const li2 = h('li', {}, '222')
    const li3 = h('li', {}, '333')
    const li4 = h('li', {}, '444')
    return h('ul', {}, [li1, li2, li3, li4]) */
    return h('ul', {}, [h('li', {}, '1111'), h('li', {}, '222'), h('li', {}, '333'), h('li', {}, '444')])
  },
}
</script>
<!-- <template>
  <div class="box">123</div>
</template> -->



<style scoped>
</style>